<template>
    <div class="side">
        <ul class="mainUl">
            <li>
                <!-- <span class="iconSpan"><i class="icon iconfont icon-guanggaoyunying"></i></span> -->
                <router-link to="/advertisingOperation"  class="basicColor" active-class="active"  :class="{active:isIt}">
                    <span class="iconSpan"><i class="icon iconfont icon-guanggaoyunying"></i></span>
                    <span class="title">广告运营</span>
                </router-link>
            </li>
            <li>
                <!-- <span class="iconSpan"><i class="icon iconfont icon-loupanyunying"></i></span> -->
                <router-link to="/floorOperation" class="basicColor" active-class="active">
                    <span class="iconSpan"><i class="icon iconfont icon-loupanyunying"></i></span>
                    <span class="title">门店楼盘运营</span>
                </router-link>
            </li>
            <li @click.self="upDown">
                <span class="iconSpan"><i class="icon iconfont icon-renzheng1"></i></span>
                <span class="title">认真审核</span>
                <i class="icon_arrow icon_right_arrow" :class="{icon_down_arrow:isDown}"></i>
                <ul v-if="isShow">
                    <li>
                        <router-link to="/agentBusiness" class="basicColor" active-class="active">
                            <span class="title_two">中介业务认证</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/projectBusiness" class="basicColor" active-class="active">
                            <span class="title_two">项目业务认证</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/servicerBusiness" class="basicColor" active-class="active">
                            <span class="title_two">综合服务商认证</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/floorVerify" class="basicColor" active-class="active">
                            <span class="title_two">楼盘认证</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/pictureVerify" class="basicColor" active-class="active">
                            <span class="title_two">门店图片认证</span>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/servicerPictureVerify" class="basicColor" active-class="active">
                            <span class="title_two">综合服务商图片审核</span>
                        </router-link>
                    </li>
                </ul>
            </li>
            <li>
                <router-link to="/accountStatement" class="basicColor" active-class="active">
                    <span class="iconSpan"><i class="icon iconfont icon-zhangdan1"></i></span>
                    <span class="title">账单</span>
                </router-link>
            </li>
            <!-- <li>
                <router-link to="/" class="basicColor">
                    <span class="iconSpan"><i class="icon iconfont icon-shensu"></i></span>
                    <span class="title">申诉处理</span>
                </router-link>
            </li> -->
            <li>
                <router-link to="/" class="basicColor">
                    <span class="iconSpan"><i class="icon iconfont icon-shuju"></i></span>
                    <span class="title">用户数据分析</span>
                </router-link>
            </li>
            <li>
                <router-link to="/" class="basicColor">
                    <span class="iconSpan"><i class="icon iconfont icon-biaoqian"></i></span>
                    <span class="title">标签管理</span>
                </router-link>
            </li>
            <li>
                <router-link to="/" class="basicColor">
                    <span class="iconSpan"><i class="icon iconfont icon-xieyi"></i></span>
                    <span class="title">协议管理</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name: "sideBar",
        data() {
            return {
                isShow: false,
                isDown: false,
                showGreen: true,
                isIt:false
            }
        },
        watch: {
            $route(to, from) {
                
                if(to.path == '/'){
                    this.isIt = true;
                }else{
                    this.isIt = false;
                }
            }
        },
        methods: {
            upDown() {
                this.isShow = !this.isShow;
                this.isDown = !this.isDown
            }
        },
        created(){
            if(this.$route.path == "/"){
                this.isIt = true;
            }else{
                this.isIt = false;
            }

            
        }

    }
</script>
<style lang="scss">
    .side {
        width: 290px; // background-color: #c90909;
        
        box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.1);
        height: calc(100% - 80px);
        overflow-y: auto;
        overflow-x: hidden;
        position: absolute; // top: 80px;
        left: 0;
        top:80px;
        .mainUl {
            position: relative;
            top: 20px;
            width: 100%;
            li {
                position: relative;
                width: 100%; // height: 50px;
                line-height: 48px;
                font-family: 'MicrosoftYaHei';
                font-size: 14px;
                padding: 1px 0;
                cursor: pointer;
                color: #48697b;
                .basicColor {
                    position: relative;
                    color: #48697b;
                    width: 100%;
                }
                .active{
                    color: #40dcbf ;
                }
                .basicColor:hover {
                    color: #40dcbf;
                }
                ul {
                    position: relative;
                    width: 100%;
                    li {
                        position: relative;
                        width: 100%;
                        .title_two {
                            position: relative;
                            left: 71px;
                            font-family: 'MicrosoftYaHei';
                            font-size: 14px;
                        }
                    }
                }
                .iconSpan {
                    position: relative;
                    left: 38px;
                }
                .title {
                    position: relative;
                    left: 50px; // color: #48697b;
                }
                .icon_arrow {
                    position: absolute;
                    right: 20px;
                    top: 22px;
                    width: 6px;
                    height: 6px;
                    border-top: 1px solid #48697b;
                    border-right: 1px solid #48697b;
                }
                .icon_right_arrow {
                    transform: rotate(45deg);
                }
                .icon_down_arrow {
                    transform: rotate(135deg) !important;
                }
            }
        }
    }
</style>
